/** * @Author: Joker * @Date: 2017/12/7 */
<template>
  <div>
    <el-dialog :close-on-click-modal="false" :title="operateType==='userGroup'?'新建用户组':'新增用户'" :visible.sync="modal" width="600px"
      :before-close="handleClose">
      <div>
        <el-form :model="groupForm" :rules="rules" ref="groupForm" size="small" label-width="80px">
          <el-form-item label="用户组名" prop="name" v-if="operateType==='userGroup'">
            <el-input v-model.trim="groupForm.name"></el-input>
          </el-form-item>
          <el-form-item label="简介" prop="desc" v-if="operateType==='userGroup'">
            <el-input v-model.trim="groupForm.desc"></el-input>
          </el-form-item>
          <el-form-item label="用户" prop="user">
            <!-- <el-select v-model="groupForm.user" multiple placeholder="请选择" filterable style="width: 100%">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select> -->
            <Person :clear="clear" @change="selectChange" @clearFinish="clear=false" />
          </el-form-item>
          <el-form-item label="角色" prop="role" v-if="operateType==='userGroup'">
            <el-select v-model="groupForm.role" multiple placeholder="请选择" style="width: 100%">
              <el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName" :value="item.roleId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit('submit')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    formCheck,
    trim
  } from '../../../lib/utils';
  import {
    userGroupManagement
  } from "../../../service/service_zbw";
  import {
    mapState
  } from "vuex";
  import Person from "../../../components/deptPerson/chosePerson.vue";
  export default {
    props: {
      addModal: {
        type: Boolean
      },
      treeData: {
        type: Array
      },
      options: {
        type: Array
      },
      operateType: {
        type: String,
        default: 'userGroup'
      },
      currentId: {
        type: String,
      },
    },
    components: {
      Person
    },
    data() {
      //设备名称校验
      const checkName = (rule, value, callback) => {
        let str = trim(value);
        if (!str) {
          return callback(new Error('用户组名不能为空'));
        } else {
          callback();
        }
      };
      //部门校验
      const checkUser = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('组下人员不能为空'));
        } else {
          if (value.length <= 0) {
            return callback(new Error('组下人员不能为空'));
          }
          callback();
        }
      };

      return {
        clear: false,
        modal: this.addModal,
        groupForm: {
          name: '',
          user: [],
          role: [],
          desc: ''
        },
        rules: {
          name: [{
              required: true,
              validator: checkName,
              trigger: 'blur'
            },
            {
              min: 1,
              max: 10,
              message: '长度不超过10个字符',
              trigger: 'blur'
            }],
            desc: [{
              message: '请输入部门描述',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 30,
              message: '长度在 1 到 30 个字符',
              trigger: 'blur'
            }],
        },
      };
    },
    computed: {
      ...mapState({
        roleList: state => state.roleList
      })
    },
    methods: {
      /**
       * 提交信息
       */
      async submit(val) {
        let flag = formCheck(this, 'groupForm');
        if (flag) {
          let param = {
            roleIds: this.groupForm.role,
            userGroupDesc: this.groupForm.desc,
            userGroupName: this.groupForm.name,
            usereIds: []
          };
          console.log(param)
          if (this.groupForm.user.length > 0) {
            for (let i of this.groupForm.user) {
              param.usereIds.push(i.userId);
            }
          }
          let res = null;
          if (this.operateType === 'userGroup') {
            //新建用户组  
            res = await userGroupManagement.createNewOne(param);
          } else {
            param.userGroupId = this.currentId;
            //用户组下增加人员  
            res = await userGroupManagement.addGroupUser(param);
          }
          if (res.success) {
            let msg = {
              type: this.operateType,
              obj: this.operateType === 'userGroup' ? res.obj : null
            };
            this.$emit('operateFinish', msg);
            this.handleClose();
            this.$message({
              type: 'success',
              message: res.msg
            });
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            });
          }
        }
      },
      /**@function
       * 人员选择改变
       */
      selectChange(val) {
        this.groupForm.user = val;
      },
      /**
       * 关闭模态框
       */
      handleClose() {
        this.clear = true;
        this.modal = false;
        this.$emit('closeModal', this.modal);
        this.handleReset('groupForm');
      },
      /**
       * 清空表单
       */
      handleReset(name) {
        this.$refs[name].resetFields();
      }
    },
    watch: {
      addModal(newval) {
        if (newval) {
          this.modal = newval;
        }
      }
    }
  }

</script>
<style scoped>


</style>

